<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>获取图片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        li {
            list-style: none;
            width: 33%;
            border-radius: 20px;
        }

        img {
            width: 100%;
        }

        div {
            display: flex;
            justify-content: space-around;
            margin: 10px 0;
        }

        button {
            width: 7%;
            height: 60px;
        }

        button {
            min-width: 130px;
            height: 40px;
            color: #fff;
            padding: 5px 10px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            display: inline-block;
            outline: none;
            border-radius: 5px;
            border: none;
            background-size: 120% auto;
            background-image: linear-gradient(315deg, #4ecdc4 0%, #c797eb 75%);
        }

        button:hover {
            background-position: right center;
        }

        button:active {
            top: 2px;
        }

        .img-list {
            position: relative;
        }
    </style>
</head>

<body>
    <div>
        <button>动物</button>
        <button>美女</button>
        <button>汽车</button>
        <button>漫画</button>
        <button>食物</button>
        <button>游戏</button>
        <button>电影</button>
        <button>人物</button>
        <button>手机</button>
        <button>风景</button>
    </div>
    <ul class="img-list" id="content"></ul>
    <script>
            click()
            function click() {
                let types = ["animal", "beauty", "car", "comic", "food", "game", "movie", "person", "phone", "scenery"]
                let btns = document.querySelectorAll("button")
                btns.forEach((item, index) => {
                    item.onclick = function () {
                        getImg(types[index])
                    }
                })
            }
            getImg()
            function getImg(type) {
                let url = 'https://api.apiopen.top/api/getImages?page=0&size=20'
                type ? url = 'https://api.apiopen.top/api/getImages?page=0&size=20&type=' + type : url
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        return success(xhr.responseText);
                    } else {
                        alert('失败！')
                    }
                }
            }
            xhr.open('GET', url);
            xhr.send();
        }

        function success(data) {
            let ul = document.querySelector(".img-list")
            let list = JSON.parse(data).result.list
            console.log(list);
            let html = ""
            list/* .filter(item => {
                return item.type == "game"
            }) */
                .forEach(item => {
                    html += `
                <li id="${item.id}" data-type="${item.type}">
                    <img src="${item.url}">
                </li>
                `
                })
            ul.innerHTML = html;
        }




    </script>
</body>

</html>